function $(selector) {
    return document.querySelector(selector);
}

function $$(selector) {
    return document.querySelectorAll(selector);
}

let chessboard = $('.chessboard')
let isGameOver = false;
let whichOne = 'white';
let chessArr = []; // 存储所有的棋子信息
// 初始化棋盘
function initChessboard() {
    let tableContent = "";
    for (let i = 0; i < 14; i++) {
        let row = '<tr>'
        for (let j = 0; j < 14; j++) {
            row += `<td data-row='${i}' data-line='${j}'></td>`
        }
        row += '</tr>';
        tableContent += row;
    }
    chessboard.innerHTML = tableContent;
}

// 绑定点击事件
function bindEvent() {
    chessboard.onclick = function (e) {
        // console.log(e.target.dataset)
        // console.log(chessboard.clientWidth * 0.92)
        if (!isGameOver) {
            let temp = Object.assign({}, e.target.dataset);
            if (e.target.nodeName === 'TD') {
                let tdWidth = chessboard.clientWidth / 14;

                let positionX = e.offsetX > tdWidth / 2;
                let positionY = e.offsetY > tdWidth / 2;

                let chessPoint = {
                    x: positionX ? parseInt(temp.line) + 1 : parseInt(temp.line),
                    y: positionY ? parseInt(temp.row) + 1 : parseInt(temp.row),
                    c: whichOne
                }
                // 绘制棋子
                chessMove(chessPoint);

            }
        } else {
            if (window.confirm('是否要重新开始一句？')) {
                chessArr = [];
                initChessboard();
                isGameOver = false;
            }
        }
    }
}

function exist(chessPoint) {
    let result = chessArr.find((item) => {
        return item.x === chessPoint.x && item.y === chessPoint.y;
    })
    return result === undefined ? true : false
}

function chessMove(chessPoint) {
    if (exist(chessPoint) && !isGameOver) {
        chessArr.push(chessPoint);
        // console.log(chessPoint)
        let newChess = `<div class="chess ${chessPoint.c}" data-row="${chessPoint.y}" data-line="${chessPoint.x}"></div>`;

        if (chessPoint.x < 14 && chessPoint.y < 14) {
            let tdPos = $(`td[data-row='${chessPoint.y}'][data-line='${chessPoint.x}']`);

            tdPos.innerHTML += newChess;
            // console.log(tdPos)
        }

        if (chessPoint.x === 14 && chessPoint.y < 14) {
            let tdPos = $(`td[data-row='${chessPoint.y}'][data-line='13']`);
            tdPos.innerHTML += newChess;
            tdPos.lastChild.style.left = '50%';
        }

        if (chessPoint.x < 14 && chessPoint.y === 14) {
            let tdPos = $(`td[data-row='13'][data-line='${chessPoint.x}']`);
            tdPos.innerHTML += newChess;
            tdPos.lastChild.style.top = '50%';
        }

        if (chessPoint.x === 14 && chessPoint.y === 14) {
            let tdPos = $(`td[data-row='13'][data-line='13']`);
            tdPos.innerHTML += newChess;
            tdPos.lastChild.style.top = '50%';
            tdPos.lastChild.style.left = '50%';
        }

        whichOne = whichOne === 'white' ? 'black' : 'white';

        check();  // 核对游戏是否结束
    }
}


function check() {
    for (let i = 0; i < chessArr.length; i++) {
        let curChess = chessArr[i];
        let chess2, chess3, chess4, chess5;

        // 检查有没有横着的5个颜色一样的棋子
        chess2 = chessArr.find(item => {
            return curChess.x === item.x + 1 && curChess.y === item.y && curChess.c === item.c
        })
        chess3 = chessArr.find(item => {
            return curChess.x === item.x + 2 && curChess.y === item.y && curChess.c === item.c
        })
        chess4 = chessArr.find(item => {
            return curChess.x === item.x + 3 && curChess.y === item.y && curChess.c === item.c
        })
        chess5 = chessArr.find(item => {
            return curChess.x === item.x + 4 && curChess.y === item.y && curChess.c === item.c
        })

        if (chess2 && chess3 && chess4 && chess5) {
            console.log('cur:', curChess)
            console.log(chess2, chess3, chess4, chess5)
            end(curChess, chess2, chess3, chess4, chess5)
        }

        // 检查有没有横着的5个颜色一样的棋子
        chess2 = chessArr.find(item => {
            return curChess.x === item.x && curChess.y === item.y + 1 && curChess.c === item.c
        })
        chess3 = chessArr.find(item => {
            return curChess.x === item.x && curChess.y === item.y + 2 && curChess.c === item.c
        })
        chess4 = chessArr.find(item => {
            return curChess.x === item.x && curChess.y === item.y + 3 && curChess.c === item.c
        })
        chess5 = chessArr.find(item => {
            return curChess.x === item.x && curChess.y === item.y + 4 && curChess.c === item.c
        })
        if (chess2 && chess3 && chess4 && chess5) {
            end(curChess, chess2, chess3, chess4, chess5)
        }

        // 检查有没有横着的5个颜色一样的棋子
        chess2 = chessArr.find(item => {
            return curChess.x === item.x + 1 && curChess.y === item.y + 1 && curChess.c === item.c
        })
        chess3 = chessArr.find(item => {
            return curChess.x === item.x + 2 && curChess.y === item.y + 2 && curChess.c === item.c
        })
        chess4 = chessArr.find(item => {
            return curChess.x === item.x + 3 && curChess.y === item.y + 3 && curChess.c === item.c
        })
        chess5 = chessArr.find(item => {
            return curChess.x === item.x + 4 && curChess.y === item.y + 4 && curChess.c === item.c
        })
        if (chess2 && chess3 && chess4 && chess5) {
            end(curChess, chess2, chess3, chess4, chess5)
        }

        // 检查有没有横着的5个颜色一样的棋子
        chess2 = chessArr.find(item => {
            return curChess.x === item.x - 1 && curChess.y === item.y - 1 && curChess.c === item.c
        })
        chess3 = chessArr.find(item => {
            return curChess.x === item.x - 2 && curChess.y === item.y - 2 && curChess.c === item.c
        })
        chess4 = chessArr.find(item => {
            return curChess.x === item.x - 3 && curChess.y === item.y - 3 && curChess.c === item.c
        })
        chess5 = chessArr.find(item => {
            return curChess.x === item.x - 4 && curChess.y === item.y - 4 && curChess.c === item.c
        })
        if (chess2 && chess3 && chess4 && chess5) {
            end(curChess, chess2, chess3, chess4, chess5)
        }
    }
}

function end() {
    if (!isGameOver) {
        isGameOver = true;

        for (let i = 0; i < chessArr.length; i++) {
            $(`div[data-row='${chessArr[i].y}'][data-line='${chessArr[i].x}']`).innerHTML = i + 1;
        }

        for (let i = 0; i < arguments.length; i++) {
            $(`div[data-row='${arguments[i].y}'][data-line='${arguments[i].x}']`).classList.add('win');
        }
    }
}

function main() {
    initChessboard();

    // 绑定对应的事件
    bindEvent();
}

main();